<template>
	<view>
		<!-- #ifndef MP-ALIPAY -->
		<nav-bar title="基本区域图"></nav-bar>
		<!-- #endif -->
		
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-m-t-30 u-chart">
			<view class="u-title u-p-20">
				<u-section title="基本区域图" line-color="#F74963" :right="false"></u-section>
			</view>
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import uChartsList from '@/style/js/uCharts.data.js';
	var _self;
	var canvaArea=null;
		
	export default {
		components: {
		},
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
		},
		onLoad(e) {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData(){
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		let Area={categories:[],series:[]};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		Area.categories=res.data.data.Area.categories;
				// 		Area.series=res.data.data.Area.series;
				// 		_self.showArea("canvasArea",Area);
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				
				//本地数据模拟运行
				let Area={categories:[],series:[]};
				Area.categories = uChartsList.list.data.Area.categories;
				Area.series = uChartsList.list.data.Area.series;
				_self.showArea("canvasArea",Area);
			},
			showArea(canvasId,chartData){
				canvaArea=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'area',
					fontSize:11,
					legend:true,
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:10,
						max:180,
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						area:{
							type: 'straight',
							opacity:0.2,
							addLine:true,
							width:2
						}
					}
				});
				
			},
			touchArea(e) {
				canvaArea.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			}
			
		},
		onPageScroll(e) {
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	}
</script>

<style>
	page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
	.u-chart{background-color: #fff;display:flex; flex-direction:column !important;}
	.u-title{width: 750rpx;}
	.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
</style>
